<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列化表单数据</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#register").click(function(){
                // console.log("用户名:"+$("#username").val());
                // location.href = "#?username="+$("#username").val();
                // 获取指定表单中所有带有name属性的元素的数据
                // 其返回值的格式为:key=value&key=value...
                // key:对应的是表单元素的name属性值
                // value:对应的是用户输入的数据
                // 一般在Ajax操作中应用
                console.log($("#registerForm").serialize());
            });
        });
    </script>
</head>
<body>
<form id="registerForm" action="#" method="get">
    用户名:<input type="text" id="username" name="username"><br>
    密码:<input type="password" name="password"><br>
    电话:<input type="text" name="phone"><br>
    地址:<input type="text" name="address"><br>
    <!--<input type="submit" value="注册">-->
    <input type="button" id="register" value="注册">
</form>
<!-- ?username=admin&password=123456&phone=13612345666&address=江苏-南京-->
</body>
</html>